Lazy Loading এবং Virtual Scrolling হল দুটি গুরুত্বপূর্ণ কৌশল যা অ্যাপ্লিকেশনটির পারফরম্যান্স উন্নত করতে সাহায্য করে। Angular অ্যাপে এই দুটি কৌশল ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন দ্রুত লোড হয় এবং বড় ডেটাসেট খুব দ্রুত দেখানো যায়। এখানে আমরা Lazy Loading এবং Virtual Scrolling সম্পর্কে আলোচনা করব এবং Angular অ্যাপে এগুলির ব্যবহার দেখাব।

Lazy Loading

Lazy Loading হল এমন একটি কৌশল যেখানে নির্দিষ্ট অংশের কোড বা মডিউলগুলো তখনই লোড হয় যখন তা প্রয়োজন হয়। এর মাধ্যমে অ্যাপ্লিকেশনের প্রাথমিক লোড টাইম কমে যায়, কারণ অ্যাপ্লিকেশন শুরুতে সব কোড লোড না হয়ে শুধু প্রাথমিক প্রয়োজনীয় কোড লোড হয়।

Lazy Loading এর সুবিধা:

• কর্মক্ষমতা উন্নয়ন: কম প্রাথমিক লোড টাইম।
• স্কেলেবিলিটি: বড় অ্যাপ্লিকেশনে কোড বিভক্ত করে লোড করতে সক্ষম।
• লোড টাইম অপ্টিমাইজেশন: ব্যবহারকারীর প্রয়োজনীয় মডিউলগুলোই লোড হবে।

Lazy Loading কিভাবে কার্যকরী হয়?

Angular অ্যাপে Lazy Loading করার জন্য, আমরা Feature Modules তৈরি করি এবং সেগুলোকে Router এর মাধ্যমে লোড করি।

Step-by-Step: Lazy Loading

Step 1: Angular মডিউল তৈরি করা

প্রথমে একটি Feature Module তৈরি করুন যেটি আপনি Lazy Load করতে চান:

ng generate module feature --route feature --module app

এই কমান্ডটি একটি Feature Module তৈরি করবে এবং app-routing.module.ts-এ লেজি লোডিং রাউটিং কনফিগারেশন সেট করবে।

Step 2: Feature Module কনফিগার করা

app-routing.module.ts ফাইলে Lazy Loading কনফিগারেশন যোগ করুন:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

এখানে, loadChildren প্রপার্টি দিয়ে Feature Module লোড হবে যখন ইউজার feature পাথ ব্যবহার করবে।

Step 3: Feature Module তৈরি করা

feature.module.ts ফাইলে প্রয়োজনীয় কম্পোনেন্ট এবং কোড তৈরি করুন।

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule]
})
export class FeatureModule {}

এখন, যখন ইউজার feature URL তে যাবে, তখন শুধু FeatureModule লোড হবে, যা অ্যাপ্লিকেশনের প্রাথমিক লোডিং টাইম কমিয়ে দেবে।

Virtual Scrolling

Virtual Scrolling হল এমন একটি কৌশল যেখানে বড় ডেটাসেটগুলোকে পেজিং বা স্ক্রলিং মাধ্যমে দেখা যায়, তবে সেগুলো একসাথে লোড না হয়ে স্ক্রল করার সময় ডেটা লোড হয়। এটি বড় ডেটাসেটগুলি দ্রুত দেখানোর জন্য ব্যবহৃত হয়।

Virtual Scrolling এর সুবিধা:

• পারফরম্যান্স উন্নয়ন: একসাথে বড় ডেটা লোড না হয়ে, স্ক্রল করার সাথে সাথে ডেটা লোড হয়, তাই ব্রাউজার দ্রুত কাজ করে।
• রিসোর্স ব্যবহার কমানো: শুধু দৃশ্যমান ডেটা লোড করা হয়, তাই রিসোর্স সাশ্রয় হয়।
• ইন্টারঅ্যাকটিভ এবং স্মুথ: ইউজারের জন্য স্মুথ স্ক্রলিং অভিজ্ঞতা প্রদান করা হয়।

Virtual Scrolling কিভাবে কার্যকরী হয়?

Angular এ @angular/cdk/scrolling লাইব্রেরি ব্যবহার করে Virtual Scrolling করা যায়। এটি ডেটা স্ক্রলিং এর জন্য একটি ডাইনামিক লোডিং কৌশল সরবরাহ করে।

Step-by-Step: Virtual Scrolling

Step 1: Angular CDK ইন্সটল করা

প্রথমে, Angular CDK ইন্সটল করতে হবে:

npm install @angular/cdk

Step 2: Virtual Scrolling মডিউল ইমপোর্ট করা

এখন, app.module.ts ফাইলে ScrollingModule ইমপোর্ট করুন:

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ScrollingModule]
})
export class AppModule {}

Step 3: Virtual Scrolling কম্পোনেন্ট তৈরি করা

app.component.ts ফাইলে ডেটা এবং স্ক্রলিং সেটআপ করুন:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = Array.from({ length: 1000 }, (_, i) => `Item #${i + 1}`);
}

Step 4: HTML টেমপ্লেট সেটআপ করা

app.component.html ফাইলে Virtual Scrolling ব্যবহার করুন:

<div class="scroll-container">
  <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
    <div *cdkVirtualFor="let item of items" class="item">
      {{ item }}
    </div>
  </cdk-virtual-scroll-viewport>
</div>

এখানে, cdk-virtual-scroll-viewport ট্যাগটি ব্যবহার করা হয়েছে, যা স্ক্রলিংয়ের মাধ্যমে ডেটা লোড করবে। itemSize="50" দ্বারা প্রতিটি আইটেমের উচ্চতা ৫০ পিক্সেল নির্ধারণ করা হয়েছে।

Step 5: CSS স্টাইলিং

app.component.css ফাইলে স্ক্রলিং স্টাইলিং করুন:

.scroll-container {
  height: 400px;
  width: 100%;
  border: 1px solid #ccc;
}

.viewport {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

এখানে, height: 400px; দিয়ে স্ক্রলিং কনটেইনারের উচ্চতা নির্ধারণ করা হয়েছে, যাতে স্ক্রলিং এলাকা দেখা যায়।

সারাংশ

• Lazy Loading এবং Virtual Scrolling উভয়ই অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক। Lazy Loading দ্বারা আপনি অ্যাপ্লিকেশনের মডিউলগুলোকে আলাদা করে লোড করতে পারেন, যাতে প্রাথমিক লোডিং টাইম কমে যায়। Virtual Scrolling এর মাধ্যমে বড় ডেটাসেট স্ক্রলিং এর মাধ্যমে দেখানো যায়, যা পারফরম্যান্সের দিক থেকে আরও উন্নত এবং স্মুথ ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।
• Lazy Loading ব্যবহারের জন্য loadChildren রাউটিং কনফিগারেশন ব্যবহার করা হয় এবং Virtual Scrolling ব্যবহারের জন্য Angular CDK-এর cdk-virtual-scroll-viewport কম্পোনেন্ট ব্যবহার করা হয়।